<script setup>
import { ref } from 'vue'
import { useVModel } from '@vueuse/core'

const props = defineProps({
  modelValue: Boolean,
  detail: Object,
  disable: Boolean,
  accounts: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(['submit', 'update:modelValue'])
const dialogVisible = useVModel(props, 'modelValue', emits)

const GAMES_TYPE = ['通用', '篮球', '足球']

const ruleForm = ref({
  deviceName: '',
  deviceId: '',
  deviceType: '',
  deviceMac: '',
  beginOnlineTime: '',
  bindAnchor: '',
  gameTime: null
})
const rules = {
  deviceId: {
    required: true,
    message: '请输入设备ID',
    trigger: 'change'
  },
  deviceType: {
    required: true,
    message: '请选择设备类型',
    trigger: 'change'
  },
  deviceMac: {
    required: true,
    message: '请输入MAC地址',
    trigger: 'change'
  },
  deviceStatus: {
    required: true,
    message: '请选择在线状态',
    trigger: 'change'
  }
}

const ruleFormRef = ref()
const handleSubmit = async () => {
  await ruleFormRef.value.validate()

  emits(
    'submit',
    Object.assign({}, ruleForm.value, {
      beginTime: ruleForm.value.gameTime?.[0],
      endTime: ruleForm.value.gameTime?.[1]
    })
  )
}

const handleClose = done => done()

const handleOpen = () => {
  ruleFormRef.value.resetFields()

  if (props.detail) {
    Object.assign(ruleForm.value, props.detail, {
      gameTime:
        props.detail.beginTime && props.detail.endTime
          ? [props.detail.beginTime, props.detail.endTime]
          : null
    })
  }
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    width="768px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    v-bind="$attrs"
    @open="handleOpen"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      label-position="right"
      label-suffix="："
      :disabled="disable"
    >
      <el-form-item label="赛事名称" prop="gameName">
        <el-input v-model.trim="ruleForm.gameName" clearable />
      </el-form-item>
      <el-form-item label="赛事类型" prop="gameType">
        <el-select v-model="ruleForm.gameType" filterable clearable>
          <el-option
            v-for="(item, index) in GAMES_TYPE"
            :key="index"
            :label="item"
            :value="index"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="赛事时间" prop="gameTime">
        <el-date-picker
          v-model="ruleForm.gameTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item label="开播时间" prop="beginOnlineTime">
        <el-date-picker
          v-model="ruleForm.beginOnlineTime"
          type="datetime"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="所属账号" prop="bindAnchor">
        <el-select v-model="ruleForm.bindAnchor" filterable clearable>
          <el-option
            v-for="item in props.accounts"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="摄像头" prop="aaa">
        <el-input v-model.trim="ruleForm.aaa" clearable />
      </el-form-item>
      <el-form-item label="播放地址" prop="bbb">
        <el-input v-model.trim="ruleForm.bbb" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">
        {{ disable ? '关闭' : '取消' }}
      </el-button>
      <el-button v-if="!disable" type="primary" @click="handleSubmit">
        确认
      </el-button>
    </template>
  </el-dialog>
</template>
